<template>
  <div>
      <el-table :data="list" sortable stripe class="tableClass">
        <el-table-column type="index" align="center" sortable></el-table-column>
        <el-table-column v-for="(v,k,i) in item" :key="i" :label="names[i]" align="center" sortable :prop="k">
            <template slot-scope="scope">
                <span v-if='k=="sex"'>
                    {{scope.row[k]==true?"男":"女"}}
                </span>
                <span v-else>
                    {{scope.row[k]}}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="watch(scope.row)">查看详情</el-button>
                <el-button style="color:#67C23A" type="text" size="small" v-if="$route.meta.auth.edit" @click="edit(scope.row)">编辑</el-button>
                <el-button style="color:#FA5555" type="text" size="small" v-if="$route.meta.auth.delete" @click="Delete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  props:{
      list:{
          default:Array
      },
      item:{
          default:Object
      },
      names:{
          default:Array
      }
  },
  methods:{
      watch(obj){
          this.$emit('info',obj)
      },
      edit(obj){
          this.$emit('edit',obj)
      },
      Delete(obj){
          this.$emit('delete',obj)
      }
  }
}
</script>


<style scoped>
.tableClass{
    width: 100%;
}
</style>
